﻿@{
    ViewBag.Title = "Grid : Hide Group Columns";
}

<h2>Grid : Hide Group Columns</h2>

<h3>Sample</h3>

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.Product>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Category);
            columns.Bound(c => c.SubCategory).Width(400);
            columns.Bound(c => c.Controls).Title("Controls/Features").ClientTemplate("<#= Controls==0?'':Controls #>");
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectProducts", "Grid"))
        .Groupable()
        .Resizable(r => r.Columns(false))
        .Scrollable(s => s.Height("auto"))
        .Pageable(p => p.PageSize(10))
        .ClientEvents(events => events.OnLoad("MyGrid_onLoad").OnDataBound("MyGrid_onDataBound"))
        .Render();
}

<script type="text/javascript">
    MyGrid_onLoad=function (e) {
        $(e.target).data('tGrid').hideGroupColumns();
    }

    MyGrid_onDataBound=function (e) {
        if(typeof console!="undefined") { console.log(e); }
    }
</script>

<h3>Documentation</h3>
<p>
The Grid loads the data using AJAX each time a column is added or removed from the "group" panel above the column headers.  When the
data is returned from the AJAX call, the data is bound to the grid in the grid.data('tGrid').dataBind() function.  The hideGroupColumns() 
extention function extends the dataBind() function to hide the grouped columns in the grid.  The hideGroupColumns() extension function
is called in the onLoad client event function handler.<br />
<br />
Here is the code for the onLoad client event function handler:

<pre class="code">
WikiPageGrid_onLoad = function(e) {
    $(e.target).data('tGrid').hideGroupColumns();
}
</pre>
</p>
